<template>
  <div class="page_reviewStockRecord">
    <van-nav-bar
      :title="queryParamObj.eachItem.title"
      left-arrow
      @click-left="$router.back()"
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div v-if="recordOfApplyOrReviewStockList.length">
        <div v-for="item in recordOfApplyOrReviewStockList" :key="item.id">
          <apply-content-item
            :itemObj="item"
            :auditTypeId="queryParamObj.eachItem.id"
            :stockItem="queryParamObj.stockItem"
            :isDetail="false"
            @openReviewForm="toOpenReviewForm"
          ></apply-content-item>
        </div>
        <van-pagination v-model="reqInitPageParamObj.pageIndex"
                        :total-items="totalRecords"
                        :show-page-size="5"
                        force-ellipses
                        @change="handlePaginationChange"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>

      <van-divider style="margin-top: 160px" v-else>暂无记录</van-divider>
    </van-pull-refresh>



    <van-popup
      v-model="popupForm"
      safe-area-inset-bottom
      closeable
      position="center"
      @click-overlay="onClickOverlay"
      :style="{ width: '90%' }"
    >
      <div class="review_form">
        <van-nav-bar title="开始审核" />
        <van-form @submit="onSubmitReview" ref="review_form">
          <van-field autocomplete="off"
            v-model="reqParams.review_price"
            name="review_price"
            type="number"
            label="审核价格"
            placeholder="请输入审核价格"
            :rules="rules"
            required
          >
            <template #button>
              <van-tag type="danger">元</van-tag>
            </template>
          </van-field>
          <van-field autocomplete="off"
            v-model="reqParams.review_content"
            name="review_content"
            rows="4"
            autosize
            label="审核理由"
            type="textarea"
            placeholder="请输入审核理由"
            required
            :rules="rules"
          />
          <van-row style="margin: 16px;" type="flex" justify="space-between">
            <van-col span="11">
              <van-button round block type="warning"
                          native-type="button"
                          @click.stop="onClickOverlay"
              >取消</van-button>
            </van-col>
            <van-col span="11">
              <van-button round block type="info" native-type="submit">提交</van-button>
            </van-col>
          </van-row>
        </van-form>
      </div>

    </van-popup>
  </div>
</template>

<script>
import {Toast, Dialog} from 'vant'
import applyContentItem from './components/applyContentItem';

import {mapGetters} from "vuex";

const rules = [
  { required: true, message: '请填写' }
];


export default {
  name: "reviewStockRecord",
  data(){
    return {
      isLoading: false,
      rules,
      queryParamObj: JSON.parse(this.$route.query.dataObj) ||{
        eachItem: {},
        stockItem: {},
      },
      popupForm: false,
      isShowReview: false,
      reqParams: {
        review_price: '',
        review_content:'',
      },
      // 记录
      recordOfApplyOrReviewStockList: [],
      totalRecords: 0,

      reqInitPageParamObj: {
        stockid: '',
        type: '',
        pageIndex: 1,
        pageSize: 10,
      },
      reviewApplyId: '',
    }
  },

  components: {
    applyContentItem
  },

  computed: {
    ...mapGetters(['allUserInfo']),
  },

  created() {
    this.reqInitPageParamObj.stockid = this.queryParamObj.stockItem.id
    this.reqInitPageParamObj.type = this.queryParamObj.eachItem.id;
  },

  mounted() {
    const { ...paramObj } = this.reqInitPageParamObj;
    this._initPage(paramObj);
  },



  methods: {

    async _initPage(paramObj, isRefresh = false){
      const resp = await this.$api.stock.reqApplyOrReviewStockRecord(paramObj);
      if (resp.code === 200) {
        this.recordOfApplyOrReviewStockList = resp.data.items || []
        this.totalRecords = resp.data.total || 0;

        if (isRefresh){
          Toast('刷新成功');
          this.isLoading = false;
        }

      }
    },


    async onSubmitReview(val){

      const paramObj = {
        applyid: this.reviewApplyId,
        stockid: this.reqInitPageParamObj.stockid,
        reason: val.review_content,
        price: val.review_price,
      };

      if (this.allUserInfo.certification_state === 2){
        const result = await this.$api.stock.reqReviewApply(paramObj);
        if (result.code === 200 ){
          Toast('审核成功');
          this.onClickOverlay();
          await this._initPage(this.reqInitPageParamObj);
        }
      } else {
        Dialog.confirm({
          title: '个人认证还没完成！！',
          message: '当前操作需完成个人认证！你当前还没有完成个人认证，请点击去个人认证。',
          messageAlign: 'left',
          confirmButtonText: '前往个人认证'
        }).then(() => {
          this.$router.push('/personalAuth')
        })
          .catch(() => {
            // on cancel
          })
      }
    },

    onClickOverlay() {
      this.popupForm = false;
      this.reqParams = {};
      // 重置表单
      this.$refs.review_form.resetValidation();
    },

    toOpenReviewForm(id){
      this.popupForm = true
      this.reviewApplyId = id
    },

    handlePaginationChange(pageIndex){
      console.log(pageIndex);
      const param = {
        ...this.reqInitPageParamObj,
        pageIndex,
      }
      this._initPage(param);
    },

    onRefresh(){
      this.reqInitPageParamObj.pageIndex = 1;
      // const param = {
      //   ...this.reqInitPageParamObj,
      //   pageIndex: 1,
      // }
      this._initPage(this.reqInitPageParamObj, true);
    },
  },

};
</script>

<style lang="scss" scoped>
.page_reviewStockRecord{
  width: 100%;
  .review_form{
    margin-top: 2px;
  }
}

</style>
